<template>
    <div class="account">
        <el-card shadow="never animate__animated animate__fadeIn animate__fast">
            <div class="title-top onflex animate__animated animate__fadeInUp">
                <h2>账号资料</h2>
            </div>
            <div class="account-full onflex">
                <div class="account-info">
                    <div
                        class="
                            block
                            animate__animated
                            animate__fadeInUp
                            animate__delay-0.5s
                        "
                    >
                        <el-upload
                            class="avatar-uploader"
                            action="gym/uploadImage"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            name="image"
                        >
                            <img
                                v-if="imageUrl"
                                :src="imageUrl"
                                class="avatar"
                            />
                            <i
                                v-else
                                class="el-icon-plus avatar-uploader-icon"
                            ></i>
                        </el-upload>
                    </div>
                    <el-form
                        :model="ruleForm"
                        status-icon
                        :rules="rules"
                        ref="ruleForm"
                        label-width="100px"
                        class="demo-ruleForm"
                    >
                        <el-form-item
                            label="用户名"
                            prop="userName"
                            :required="true"
                            class="
                                animate__animated
                                animate__fadeInUp
                                animate__delay-0.5s
                            "
                        >
                            <el-input
                                v-model.number="ruleForm.userName"
                                :disabled="true"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="邮箱"
                            prop="email"
                            :required="true"
                            class="
                                animate__animated
                                animate__fadeInUp
                                animate__delay-0.5s
                            "
                        >
                            <el-input
                                v-model.number="ruleForm.email"
                                :disabled="true"
                            ></el-input>
                        </el-form-item>

                        <el-form-item
                            label="旧密码"
                            prop="oldPass"
                            :required="true"
                            class="
                                animate__animated
                                animate__fadeInUp
                                animate__delay-0.5s
                            "
                        >
                            <el-input
                                type="password"
                                v-model.number="ruleForm.oldPass"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="新密码"
                            prop="pass"
                            :required="true"
                            class="
                                animate__animated
                                animate__fadeInUp
                                animate__delay-0.5s
                            "
                        >
                            <el-input
                                type="password"
                                v-model="ruleForm.pass"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="确认新密码"
                            prop="checkPass"
                            :required="true"
                            class="
                                animate__animated
                                animate__fadeInUp
                                animate__delay-0.5s
                            "
                        >
                            <el-input
                                type="password"
                                v-model="ruleForm.checkPass"
                                autocomplete="off"
                            ></el-input>
                        </el-form-item>

                        <el-form-item
                            class="
                                animate__animated
                                animate__fadeInUp
                                animate__delay-0.5s
                            "
                        >
                            <el-button
                                type="primary"
                                @click="submitForm('ruleForm')"
                                >提交</el-button
                            >
                            <el-button @click="resetForm('ruleForm')"
                                >重置</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        //旧密码验证
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        //新密码二次验证
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        //旧密码验证
        var validateOldPass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入旧密码"));
            } else {
                callback();
            }
        };
        return {
            //头像
            imageUrl: "",
            circleUrl:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            //表单
            ruleForm: {
                pass: "",
                checkPass: "",
                oldPass: "",
                email: "",
                userName: "",
            },
            rules: {
                pass: [{ validator: validatePass, trigger: "blur" }],
                checkPass: [{ validator: validatePass2, trigger: "blur" }],
                oldPass: [{ validator: validateOldPass, trigger: "blur" }],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                console.log(this.imageUrl);
                if (valid) {
                    this.$axios({
                        url: "/gym/statistics/updateAdminPassword",
                        method: "post",
                        data: {
                            oldPassword: this.ruleForm.oldPass + '',
                            newPassword: this.ruleForm.pass,
                            confirmPassword: this.ruleForm.checkPass,
                            image: this.imageUrl,
                        },
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getUser() {
            // let token = localStorage.getItem('token')
            // console.log(token);
            this.$axios({
                url: "/gym/statistics/findMemberByMember",
                // headers: {
                //     "token": token,
                // }
            }).then((res) => {
                if (res.data.code != 200) {
                } else {
                    console.log(res.data.data);
                    this.ruleForm.userName = res.data.data.name;
                    this.ruleForm.email = res.data.data.mail;
                }
            });
        },

        handleAvatarSuccess(res, file) {
            console.log(res.data);
            let user = JSON.parse(sessionStorage.getItem("user"));
            user.image = res.data;
            sessionStorage.setItem("user", JSON.stringify(user));
            this.imageUrl = res.data;
        },
        beforeAvatarUpload(file) {
            const type =
                file.type === "image/jpeg" ||
                "image/jpg" ||
                "image/webp" ||
                "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!type) {
                this.$message.error(
                    "图片格式不正确!(只能包含jpg，png，webp，JPEG)"
                );
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return type && isLt2M;
        },
    },
    // computed: {
    //     headers(){
    //         return{
    //             'token': sessionStorage.getItem('token'),
    //         }
    //     }
    // },
    mounted() {
        this.getUser();
        // console.log(toString(this.ruleForm.oldPass));
        
    },
};
</script>

<style lang="less" scoped>
.block {
    /deep/.avatar-uploader .el-upload {
        width: 100px;
        height: 100px;
        border: 1px solid #d9d9d9;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    /deep/.avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    /deep/.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    /deep/.avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
}

.text-l {
    text-align: left;
}
.title-top {
    line-height: 50px;
    border-bottom: 1px solid #00000020;
    padding-bottom: 15px;
}
.account-full {
    margin-top: 90px;
    justify-content: center;
    .account-info {
        width: 400px;
        margin-bottom: 50px;
        .el-form {
            margin-top: 50px;
            transform: translateX(-40px);
        }
    }
}
</style>